<template>
	<div class="container">
		<TabItem></TabItem>
		<div class="moive-wrap">
			<CinemaCity v-for="(item,index) in cinemas" :key="index" :cinemas="item"></CinemaCity>
		</div>
	</div>
</template>

<script>
import api from '../config/api.js';
import CinemaCity from '../components/CinemaCity.vue';
import TabItem from '../components/TabItem.vue';

export default {
	components: {
		CinemaCity,
		TabItem
	},
	data(){
		return {
			detailMovie:'',
			bgImg: '',
			cinemas:'',
			showDays: '',
			page: 0,
			limit: 20,
			date: '',
			timeIndex: ''
		}
	},
	methods: {
		// 封装电影列表请求
		_sendMovieRequest(){
			return new Promise((resolve,reject) => {
				var d= {
				    day: this.date,
				    offset: this.page,
				    limit: this.limit,
				    districtId: -1,
				    lineId: -1,
				    hallType: -1,
				    brandId: -1,
				    serviceId: -1,
				    areaId: -1,
				    stationId: -1,
				    item: "",
				    updateShowDay: true,
				    reqId: Date.now(),
				    cityId: 20
				};
				
				var dd = new URLSearchParams();
				for(let k in d){
					dd.append(k,d[k])
				}
				this.$axios({
					method: 'get',
					url: api.cinemaList,
					params:dd
				}).then((res)=>{
					resolve(res)
				})
			})
		},
		// 获取电影院
		_getMovie(){
			var date = new Date();
			this.date = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
			
			this._sendMovieRequest().then((res) => {
				console.log(res)
				this.cinemas = res.data.cinemas;
				// this.showDays = res.data.showDays.date
			})
		},
		// 获取更多电影院
		_getMostMovie(){
			document.addEventListener('scroll',(e)=>{
				var scrollHeight = e.target.body.scrollHeight;
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				var clientHeight = e.target.body.clientHeight;
				var d = scrollHeight - scrollTop == clientHeight;
				
				if(d){
					this.page += this.limit;
					this._sendMovieRequest().then((res) => {
						this.cinemas.push(...res.data.cinemas);
					});
				}
			})
		},
	},
	created() {
		this._getMovie();
	}
	
}
</script>

<style>
.moive-wrap {
	width: 100%;
	height: calc(100% - 98px);
	position: absolute;
	overflow: auto;
}
</style>
